<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body >
    <div id="app">
        <h2>{{ msg }} 您好</h2>

        <!--vue提供两个指令:  v-text  v-html  都可以直接根据属性名获取data中数据渲染到指定标签内-->

        <!--v-text-->
        <h2><span v-text="msg">123213213</span> 您好</h2>

        <!--
            v-text: {{}} 取值区别:
                1.使用{{}}取值不会将标签原始数据覆盖  使用v-text获取数据会将标签中原始内容覆盖
                2.v-text获取数据时不会出现插值闪烁   {{ 属性名 }} ===> 插值表达式:容易出现插值闪烁: 插值闪烁:当网络条件不好情况下使用{{}}方式获取数据
        -->

        <!--v-html-->

        <h2 v-html="msg"></h2>


        <!--
            共同点: 都可以直接根据data中数据名,将数据渲染到标签内部
            v-text:  v-text将获取数据直接以文本形式渲染到标签内部              innerText(js)
            v-html:  v-html将获取数据中含有html标签解析之后渲染到对应标签内部   innerHtml(js)
        -->

        <h1>{{content}}</h1>
        <h1 v-text="content"></h1>
        <h1 v-html="content"></h1>




    </div>
</body>
</html>
<!--引入vuejs 文件-->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app", //指定vue作用范围
        data:{    //用来给vue实例绑定一系列数据
           msg:"hello vue",
           content: "欢迎来到<a href='http://www.baizhiedu.com'>百知教育</a>",
        }
    });
</script>